<template>
	<div class="container">
		<div class="timeShow">当前时间：{{ showTime2 }}</div>
		<div class="timeLine">
			<TimeLine ref="Timeline2" :initTime="time2" @timeChange="timeChange2" :timeSegments="timeSegments"
				:isMobile="false" :initZoomIndex="11" :extendZOOM="extendZOOM" :customShowTime="customShowTime"
				@click_timeSegments="click_timeSegments" @click_timeline="onClickTimeLine"
				@dragTimeChange="onDragTimeChange"></TimeLine>
		</div>

		<button @tap="handleClick()">4倍</button>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import TimeLine from "@/components/timeLine/index"
	export default {
		components: {
			TimeLine
		},
		data() {
			return {
				// 显示时间段
				time2: Date.now(),
				timeSegments: [{
						name: '时间段1',
						beginTime: new Date('2024-09-16 10:00:00').getTime(),
						endTime: new Date('2024-09-17 23:00:00').getTime(),
						color: '#FA3239',
						startRatio: 0.65,
						endRatio: 0.9
					},
					{
						name: '时间段2',
						beginTime: new Date('2024-09-18 02:00:00').getTime(),
						endTime: new Date('2024-09-18 18:00:00').getTime(),
						color: '#836ABB',
						startRatio: 0.65,
						endRatio: 0.9
					}
				],
				// 扩展时间分辨率
				extendZOOM: [{
					zoom: 25,
					zoomHourGrid: 0.5,
				
				}],
				timer: null,
				timeDouble: 1
			}
		},
		computed: {
			// 显示时间段
			showTime2() {
				return dayjs(this.time2).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		onLoad() {
			// 显示时间段
			this.timer = setInterval(() => {
				this.time2 += (1000 * this.timeDouble)
				this.$refs.Timeline2.setTime(this.time2)
			}, 1000)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onBackPress() {
			clearInterval(this.timer)
		},
		methods: {
			handleClick() {
				this.timeDouble = 60 * 30
			},
			// 显示时间段
			timeChange2(t) {
				// this.time2 = t
				console.log("当前时间：", dayjs(t).format('YYYY-MM-DD HH:mm:ss'))
			},
			click_timeSegments(arr, ...args) {
				console.log('onClickTimeSegments', arr, args)
				alert('点击了：' + arr[0].name)
			},
			onClickTimeLine(...args) {
				console.log('onClickTimeLine', args)
			},
			onDragTimeChange(...args) {
				console.log('onDragTimeChange', args)
			},
			// 自定义判断时间轴上是否显示某个日期时间
			customShowTime(date, zoomIndex) {
				// 当zoomIndex等于11，也就是等于我们开展的zoom时才自己处理
				if (zoomIndex === 11) {
					// 时间是2的倍数时才会显示
					return date.getHours() % 1 === 0 && date.getMinutes() === 0
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		position: relative;
		justify-content: center;
		flex-direction: column;

		.timeLine {
			height: 50px;
		}
	}

	.timeShow {
		margin: 10px 0;
		display: flex;
		justify-content: center;
		user-select: none;
	}
</style>